<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
		body{
			font-size:9pt;
			font-family:"굴림";		
		}
		div, p{
			border:1px #eeeeee solid;
			margin:10px;
		}
	</style>
	
	
	<script>
		window.onload=function(){
			/*
				자식 노드를 구하고 접근하기			
			*/
			
			//1. Element의 자식노드 찾기. childNodes 역시 NodeList객체랍니다.
			var page = window.document.getElementById("sample_page");
			var nodes = page.childNodes;
			alert("#sample_page의 자식노드 갯수는 ? "+nodes.length);
		
			//2. 자식 노드를 하나씩 접근하기.
			for(var i=0;i<nodes.length;i++){
				var node = nodes.item(i);
				
				//Node가 Element인 경우만 스타일을 변경시킨다.
				if(node.nodeType==1)
					node.style.border = "4px solid #ff0000";
			}
					
			//3. 첫번째 자식노드 접근하기.
			var firstChild = page.firstChild;
			// 현재 firstChild는 textNode이기 때문에 스타일을 적용할 수 없답니다.
			firstChild.style.color = "#ff0000";
			
			//4. 마지막번째 자식노드 접근하기.
			var lastChild = page.lastChild;
			// 현재 lastChild는 textNode이기 때문에 스타일을 적용할 수 없답니다.
			lastChild.style.color = "#ff0000";
		}
	</script>
</head>
	
<body>
	<div id="sample_page" class="page" >
		샘플 페이지(div, id=sample_page, class=page)
		<div id="header">				
			헤더 영역(div, id=header)
		</div>
		<div id="content" class="sample_content">
			컨텐츠 영역(div, id=content, class=sample_content)
			<div> 
				JavaScript란?(div)
				<p id="data_1">1. 자바스크립트 Core(p, id=data_1)</p>
				<p id="data_2">2. 자바스크립트  BOM(p, id=data_2)</p>
				<p id="data_3">3. 자바스크립트 DOM(p, id=data_3)</p>
				을 배운다는것
			</div>
			<div class="content_data">
				자바스크립트에서 배울 내용(div, class=content_data)
				<p>1. 자바스크립트 DOM(p)</p>
				<p>2. 자바스크립트 Ajax(p)</p>
			</div>				
			<div class="content_data">
				jQuery에서 배울 내용(div, class=content_data)
				<p>1. jQuery DOM(p)</p>
				<p>2. jQuery Ajax(p)</p>
			</div>				
		</div>
		<div id="footer">				
			푸터 영역(div, id=footer)
		</div>		
	</div>	
</body>

</html>
